<template>
  <a-modal
    title="动态表单配置"
    :width="680"
    :visible="visible"
    @ok="handleModalConfirm"
    @cancel="handleModalCancel"
    :confirm-loading="modalLoading"
  >
    <a-form-model
      :model="form"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
    >
      <a-form-model-item label="屏蔽渠道">
        <a-tree-select
          v-model="form.preventChannelId"
          multiple
          style="width: 100%"
          :tree-data="treeData"
          tree-checkable
          show-checked-strategy="SHOW_CHILD"
          placeholder="请选择"
          :maxTagCount="1"
          :dropdownStyle="{ maxHeight: '360px' }"
        />
      </a-form-model-item>
      <a-form-model-item label="满足条件">
        <a-radio-group v-model="form.meetConditions">
          <a-radio :value="1">全部不匹配</a-radio>
          <a-radio :value="2">满足条件</a-radio>
          <a-radio :value="3">满足其一</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-collapse v-model="activeKey" :bordered="false">
        <template #expandIcon="props">
          <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
        </template>
        <a-collapse-panel key="1" header="筛选条件">
          <div v-if="isbool" style="color:red;">*此次操作为新增操作</div>
          <a-form-model-item label="年龄">
            <a-input-group compact>
              <a-input
                v-model="age1"
                :min="0"
                style="width: 70px; text-align: center"
                placeholder="20"
                @change="onChange"
              />
              <a-input-number
                :min="0"
                style="
                  width: 30px;
                  border-left: 0;
                  pointer-events: none;
                  backgroundcolor: #fff;
                "
                placeholder="-"
                disabled
              />
              <a-input
                v-model="age2"
                style="width: 70px; text-align: center; border-left: 0"
                placeholder="60"
                @change="onChange"
              />
            </a-input-group>
          </a-form-model-item>
          <a-form-model-item label="身份证">
            <a-checkbox-group v-model="form.idCard">
              <a-checkbox value="有">有</a-checkbox>
              <a-checkbox value="无">无</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="性别">
            <a-checkbox-group v-model="form.sex">
              <a-checkbox value="男">男</a-checkbox>
              <a-checkbox value="女">女</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="借款额度">
            <a-checkbox-group v-model="form.loanAmount">
              <a-checkbox value="50000">50000</a-checkbox>
              <a-checkbox value="100000">100000</a-checkbox>
              <a-checkbox value="200000">200000</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="芝麻分">
            <a-checkbox-group v-model="form.sesameSeed">
              <a-checkbox value="700以上">700以上</a-checkbox>
              <a-checkbox value="650-699以内">650-699以内</a-checkbox>
              <a-checkbox value="600-649以内">600-649以内</a-checkbox>
              <a-checkbox value="600以下">600以下</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="逾期情况">
            <a-checkbox-group v-model="form.overdueSituation">
              <a-checkbox value="无逾期">无逾期</a-checkbox>
              <a-checkbox value="有逾期">有逾期</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="职业">
            <a-checkbox-group v-model="form.profession">
              <a-checkbox value="上班族">上班族</a-checkbox>
              <a-checkbox value="公务员-事业单位">公务员-事业单位</a-checkbox>
              <a-checkbox value="私营企业主">私营企业主</a-checkbox>
              <a-checkbox value="自由职业">自由职业</a-checkbox>
            </a-checkbox-group>
          </a-form-model-item>
        </a-collapse-panel>
        <!-- <a-collapse-panel key="2" header="资产情况">
         
        
         
        </a-collapse-panel> -->
        <a-collapse-panel key="3" header="完善信息" :disabled="false">
          <a-form-model-item label="房屋信息">
            <a-checkbox-group v-model="form.house">
              <a-checkbox value="有">有</a-checkbox>
              <!-- <a-checkbox value="无">无</a-checkbox> -->
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="车辆信息">
            <a-checkbox-group v-model="form.car">
              <a-checkbox value="有">有</a-checkbox>
              <!-- <a-checkbox value="无">无</a-checkbox> -->
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="公积金">
            <a-checkbox-group v-model="form.accumulation">
              <!-- <a-checkbox value="六个月以上">六个月以上</a-checkbox>
              <a-checkbox value="六个月以下">六个月以下</a-checkbox> -->
              <a-checkbox value="有">有</a-checkbox>
              <!-- <a-checkbox value="无">无</a-checkbox> -->
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="社保">
            <a-checkbox-group v-model="form.socialSecurity">
              <a-checkbox value="有">有</a-checkbox>
              <!-- <a-checkbox value="无">无</a-checkbox> -->
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="保险">
            <a-checkbox-group v-model="form.insurance">
              <a-checkbox value="有">有</a-checkbox>
              <!-- <a-checkbox value="无">无</a-checkbox> -->
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="花呗额度">
            <a-checkbox-group v-model="form.huabei">
              <a-checkbox value="有">有</a-checkbox>
              <!-- <a-checkbox value="无">无</a-checkbox> -->
            </a-checkbox-group>
          </a-form-model-item>
          <a-form-model-item label="京东白条额度">
            <a-checkbox-group v-model="form.jdQuota">
              <a-checkbox value="有">有</a-checkbox>
              <!-- <a-checkbox value="无">无</a-checkbox> -->
            </a-checkbox-group>
          </a-form-model-item>
        </a-collapse-panel>
      </a-collapse>
    </a-form-model>
  </a-modal>
</template>

<script>
import * as Ajax from "@/api/institution";
export default {
  props: {
    visible: {
      type: Boolean,
    },
    id: {
      type: [String, Number],
    },
    default: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    visible(val) {
      if (val) {
        const { preventChannelId, meetConditions, planConditionConfigVOList } =
          JSON.parse(JSON.stringify(this.default || "{}"));
        this.form = {
          ...this.form,
          preventChannelId: preventChannelId ? preventChannelId.split(",") : [],
          meetConditions,
        };
        if (planConditionConfigVOList.length !== 0) {
          this.isbool = false;
          planConditionConfigVOList.map((item) => {
            const { label, labelName, content } = item;
            const _content = content || "";
            if (labelName === "年龄") {
              this.form[label] = _content;
              const age = _content.split("-");
              this.age1 = age[0] || "";
              this.age2 = age[1] || "";
            } else {
              this.form[label] = _content.split(",");
            }
          });
          //  console.log(this.form);
        } else {
          this.form.idCard = ["有", "无"];
          this.form.sex = ["男", "女"];
          this.form.loanAmount = ["50000", "100000", "200000"];
          this.form.sesameSeed = [
            "700以上",
            "650-699以内",
            "600-649以内",
            "600以下",
          ];
          this.form.overdueSituation = ["无逾期", "有逾期"];
          this.form.profession = [
            "上班族",
            "公务员-事业单位",
            "私营企业主",
            "自由职业",
          ];
          this.isbool = true;
        }
      }
    },
  },
  data() {
    return {
      isbool: false,
      activeKey: ["1", "2", "3"],
      modalLoading: false,
      age1: "",
      age2: "",
      form: {
        preventChannelId: [],
        meetConditions: 2,
        age: "",
        idCard: [],
        sex: [],
        loanAmount: [],
        house: [],
        car: [],
        accumulation: [],
        sesameSeed: [],
        overdueSituation: [],
        profession: [],
        socialSecurity: [],
        insurance: [],
        huabei: [],
        jdQuota: [],
      },
      treeData: [],
      keyList: [
        { label: "age", labelName: "年龄", showType: 2, requireVerify: 0 },
        { label: "idCard", labelName: "身份证", showType: 3, requireVerify: 0 },
        { label: "sex", labelName: "性别", showType: 1, requireVerify: 0 },
        {
          label: "loanAmount",
          labelName: "借款额度",
          showType: 1,
          requireVerify: 0,
        },
        {
          label: "house",
          labelName: "房屋信息",
          showType: 1,
          requireVerify: 0,
        },
        { label: "car", labelName: "车辆信息", showType: 1, requireVerify: 0 },
        {
          label: "accumulation",
          labelName: "公积金",
          showType: 1,
          requireVerify: 0,
        },
        {
          label: "sesameSeed",
          labelName: "芝麻分",
          showType: 1,
          requireVerify: 0,
        },
        {
          label: "overdueSituation",
          labelName: "逾期情况",
          showType: 1,
          requireVerify: 0,
        },
        {
          label: "profession",
          labelName: "职业",
          showType: 1,
          requireVerify: 0,
        },
        {
          label: "socialSecurity",
          labelName: "社保",
          showType: 1,
          requireVerify: 0,
        },
        {
          label: "insurance",
          labelName: "保险",
          showType: 1,
          requireVerify: 0,
        },
        {
          label: "huabei",
          labelName: "花呗额度",
          showType: 1,
          requireVerify: 0,
        },
        {
          label: "jdQuota",
          labelName: "京东白条额度",
          showType: 1,
          requireVerify: 0,
        },
      ],
    };
  },
  mounted() {
    this.getSelect();
  },
  methods: {
    onChange() {
      if (this.age1 || this.age2) {
        this.form.age = this.age1 + "-" + this.age2;
      } else {
        this.form.age = "";
      }
    },
    getSelect() {
      Ajax.getChannelSelect().then((res) => {
        if (res.success) {
          this.treeData = Array.isArray(res.data)
            ? res.data.map((it) => ({
                ...it,
                title: it.channelName,
                value: it.id,
              }))
            : [];
        }
      });
    },
    handleModalConfirm() {
      this.modalLoading = true;
      const filterConditionList = this.keyList.map((item) => ({
        ...item,
        content:
          item.labelName === "年龄"
            ? this.form[item.label]
            : this.form[item.label].join(","),
      }));
      const { preventChannelId, meetConditions } = this.form;
      const params = {
        planId: this.id,
        preventChannelId: preventChannelId.join(","),
        meetConditions,
        filterConditionList,
      };
      Ajax.filterPlanCityList(params)
        .then(({ success }) => {
          if (success) {
            this.$message.success("保存成功");
            this.$emit("success");
            this.handleModalCancel();
          }
        })
        .finally(() => {
          this.modalLoading = false;
        });
    },
    handleModalCancel() {
      this.form = this.$options.data().form;
      this.keyList = this.$options.data().keyList;
      this.age1 = "";
      this.age2 = "";
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 20px;
  padding-top: 16px;
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;
}

::v-deep .ant-collapse-borderless > .ant-collapse-item {
  border: none;
}

::v-deep .ant-collapse-borderless {
  background-color: #fff;
}

::v-deep .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
}

::v-deep .ant-collapse-content-box {
  padding: 0 !important;
}

::v-deep .ant-divider {
  margin: 16px 0 12px;
}

::v-deep .ant-collapse {
  .ant-form-item {
    margin-bottom: 0px;
  }
}

::v-deep .ant-form-item {
  margin-bottom: 0px;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>
